<template>
  <div class="ticketList-box">
    <div class="ticketList-top-btn">
      <el-button @click="ticketEdit('','add')" icon="el-icon-check">发布门票</el-button>
    </div>
    <el-table empty-text="赶快发布一张门票吧~" v-loading="loadingTable" element-loading-text="拼命加载中" :data="$store.state.ticketList" border style="width: 100%;height:auto;">
      <!-- <el-table-column align="center" label="图片" show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.ticketUrl" alt="" width="60" height="60" style="margin:0 auto">
        </template>
      </el-table-column>-->
      <el-table-column width="180" align="center" label="部门ID票名日期" show-overflow-tooltip>
        <template slot-scope="scope">
          <p class="cellPLeft">
            <span>部门ID:{{ scope.row.deptId }}</span>
          </p>
          <p class="cellPLeft">
            <span>票种:{{scope.row.tTypeName}}</span>
            <span>票种ID:{{scope.row.ticketTypeId}}</span>
          </p>
          <p>
            <span style="margin-left:4px">{{$moment( scope.row.stime, "YYYY-MM-DD") }}</span>
            <span style="margin-left:6px">{{$moment( scope.row.etime, "YYYY-MM-DD") }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="地址权益" width="360" show-overflow-tooltip>
        <template slot-scope="scope">
          <p class="cellPLeft">{{scope.row.address}}</p>
          <p class="cellPLeft">{{ scope.row.purpose }}</p>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="sprice" align="center" label="价格" show-overflow-tooltip>
      </el-table-column>-->
      <el-table-column prop="tSum" align="center" label="库存" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="销量" show-overflow-tooltip>
        <template slot-scope="scope">
          <p>{{ scope.row.snum || 0 }}</p>
        </template>
      </el-table-column>
      <!-- stime etime -->
      <!-- <el-table-column width="160" align="center" label="发布时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <p>{{ scope.row.createDate | datetime }}</p>
        </template>
      </el-table-column>-->
      <el-table-column width="160" align="center" label="更新时间">
        <template slot-scope="scope">
          <p>{{ scope.row.updateDate | datetime }}</p>
        </template>
      </el-table-column>
      <el-table-column width="126" prop="tTypeDate" align="center" label="入场时间">
      </el-table-column>
      <el-table-column width="96" prop="tableName" align="center" label="报名字段"></el-table-column>
      <el-table-column prop="url" align="center" label="移动链接">
        <template slot-scope="scope">
          <input type="text" v-if="scope.row.url" style=" opacity: 0;width:0px" v-model="scope.row.url">
          <el-button v-if="scope.row.url" v-clipboard:copy="scope.row.url " v-clipboard:success="onCopy" v-clipboard:error="onError" type="text">复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="pcUrl" align="center" label="PC链接">
        <template slot-scope="scope">
          <input type="text" v-if="scope.row.pcUrl" style=" opacity: 0;width:0px" v-model="scope.row.pcUrl">
          <el-button v-if="scope.row.pcUrl" v-clipboard:copy="scope.row.pcUrl " v-clipboard:success="onCopy" v-clipboard:error="onError" type="text">复制链接</el-button>
        </template>
      </el-table-column>
      <!-- 
      <el-table-column align="center" width="160" label="排它" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="exclusive">
            <div class="left-text">
              <p style="max-width:120px" class="one-txt-cut" v-for="(it,ind) of initPaiTaFun(scope.row)" :key="ind">{{ it }}</p>
            </div>
            <div class="el-icon-edit-outline" style="font-size:20px;padding-left:10px;cursor:pointer;" @click="paiOtherFormFun(scope.row)"></div>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column width="120" align="center" label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button @click="ticketEdit(scope.row,'edit')" style="color:#00B2A9" type="text">编辑</el-button>
          <!-- <el-button v-if="scope.row.snum == '0'" @click="ticketDel(scope.row)" style="color:#F56C6C" type="text">删除</el-button> -->
          <el-button v-if="!scope.row.snum " @click="ticketDel(scope.row)" style="color:#F56C6C" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 排它 -->
    <el-dialog title="排它设置" :visible.sync="paiOtherAlert">
      <el-table ref="multipleTable" border @selection-change="handleSelectionChange" :data="paiOtherForm">
        <el-table-column type="selection" width="66" align="center"></el-table-column>
        <el-table-column prop="ticketTypeId" align="center" label="ID"></el-table-column>
        <el-table-column prop="tTypeName" align="center" label="票种"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paiOtherAlert = false">取 消</el-button>
        <el-button type="primary" :loading="lodingPaiTai" @click="subpaiOtherFun()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法
import { mapGetters } from "vuex";

export default {
  name: "ticketList",
  computed: {
    ...mapGetters(["disabled"])
  },
  data() {
    return {
      paiOtherAlert: false, // 排它
      lodingPaiTai: false,
      loadingTable: false, //表格
      EditTicket: "", //当前编辑的票
      selectPaiOther: [],
      startDate: "",
      endDate: "",
      paiOtherForm: [] // 排它数据
    };
  },
  created() {
    this.$store.dispatch("setDisabled", false);
    // if (sessionStorage.activityId) {
    //   this.getTickedList()
    // }
  },
  methods: {
    // 初始化排它
    initPaiTaFun(scopeRow) {
      let subData = [];
      let ticketIdList = [];
      if (scopeRow.exclusive) {
        ticketIdList = JSON.parse(scopeRow.exclusive);
        for (let i = 0; i < ticketIdList.length; i++) {
          const ele = ticketIdList[i];
          subData.push(ele.tTypeName);
        }
      }
      return subData;
    },
    //排他
    paiOtherFormFun(scopeRow) {
      this.paiOtherForm = [];
      for (let i = 0; i < this.$store.state.ticketList.length; i++) {
        if (
          this.$store.state.ticketList[i].ticketTypeId != scopeRow.ticketTypeId
        ) {
          this.paiOtherForm.push(this.$store.state.ticketList[i]);
        }
      }
      this.EditTicket = scopeRow;
      this.paiOtherAlert = true;
    },
    //选了的排它设置
    handleSelectionChange(val) {
      this.selectPaiOther = val;
    },
    // 提交排他设置
    subpaiOtherFun() {
      if (this.selectPaiOther.length == 0) {
        this.$message({
          message: "请至少选一项",
          type: "warning"
        });
        return;
      }
      let selectData = [];
      this.selectPaiOther.map(item => {
        selectData.push({
          ticketTypeId: item.ticketTypeId,
          tTypeName: item.tTypeName
        });
      });
      this.EditTicket.exclusive = JSON.stringify(selectData);
      let subData = {
        activityId: this.$store.state.activityId,
        exclusive: this.EditTicket.exclusive,
        ticketTypeId: this.EditTicket.ticketTypeId
      };
      this.lodingPaiTai = true;
      this.$http
        .post("/api/isv/ticketPurchasePC/updateTicketInfo", subData)
        .then(
          res => {
            this.lodingPaiTai = false;
            if (res.data.success) {
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.paiOtherAlert = false;
              this.getTickedList();
            } else {
              this.$message({
                message: res.data.errorMsg || "数据提交失败",
                type: "warning"
              });
            }
          },
          err => {
            this.lodingPaiTai = false;
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 发布门票和编辑
    ticketEdit(ticketD, e) {
      sessionStorage.setItem("ticketD", JSON.stringify(ticketD));
      this.$router.push({
        name: "ticketRelease",
        params: {
          ticketD: ticketD
        }
      });
    },
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    // 删除数据
    ticketDel(ticketD) {
      this.$confirm("您确定是否要进行删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let subData = {
            activityId: ticketD.activityId,
            ticketTypeId: ticketD.ticketTypeId
          };
          this.$http.post("/api/isv/ticketType/delTicketType", subData).then(
            res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getTickedList();
              } else {
                this.$message({
                  message: res.data.errorMsg || "删除失败",
                  type: "warning"
                });
              }
            },
            err => {
              this.$message.error("服务器出小差了");
            }
          );
        })
        .catch(() => {});
    },
    getTickedList() {
      this.loadingTable = true;
      GetDataFun.getTicketList().then(res => {}, err => {});
      this.loadingTable = false;
    }
  }
};
</script>

<style scoped>
.ticketList-box {
  width: 100%;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 16px 26px;
}
.exclusive {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ticketList-top-btn {
  width: 100%;
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}
.cellPLeft {
  text-align: left;
  width: 100%;
}
.table_content .el-table th {
  background-color: #f9f9f9 !important;
}
</style>
